<template>
    <div class="all">
      <router-link to="selectAllMeeting" tag="div" class="Modular">
        <div class="Modular-name-left">
          <span>{{ModularList.name}}</span>
          <span style="display: inline-block;color: #d3d3d3;transform: scale(1,2)"> > </span>
        </div>
        <div class="Modular-equipment">{{ModularList.equipment}}</div>
        <div class="Modular-adder">{{ModularList.mettingAddare}}</div>
      </router-link>
      <div class="field">
        <mt-field label="会议名字" placeholder="十二个字以及十二个字以内" :attr="{ maxlength: 12 }" :value="meetingConter.meetingName"></mt-field>
      </div>
      <div class="field">
        <mt-field label="主题/目的:" placeholder="详细说明（选填）" type="textarea" rows="4" :value="meetingConter.meetingCenter"></mt-field>
      </div>
      <div class="field">
        <mt-cell title="日期" @click.native="open('picker1')" :value="meetingConter.date"></mt-cell>
        <mt-datetime-picker ref="picker1" type="date" v-model="meetingData"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="dataChange">
        </mt-datetime-picker>
      </div>
      <div class="field">
        <mt-cell title="时间" @click.native="open('picker2')" :value="meetingConter.time"></mt-cell>
        <mt-datetime-picker ref="picker2" type="time" v-model="meetingTime"
                            hour-format="{value}" minute-format="{value}" @confirm="TimeChange" @input="change">
        </mt-datetime-picker>
      </div>
      <div class="field">
        <mt-field label="会议时长" placeholder="请填写会议时长" :attr="{ maxlength: 2 }" type="number" :value="meetingConter.meetingTimeLong"></mt-field>
      </div>
      <div class="field">
        <mt-field label="电话号码" placeholder="请填写电话号码" type="number" :value="meetingConter.phoneNumber"></mt-field>
      </div>
      <div class="field Modular">
        <div class="user">
          <div class="addUser">
            <span>参会人:</span>
            <router-link class="iconAdd" tag="span" :to="{ path: 'addUserMetting', query: { time: this.meetingConter.time }}"> + </router-link>
          </div>
          <div class="userInfo">
            {{meetingConter.userInfoName}}
          </div>
        </div>
      </div>
      <div class="field" :style="{marginBottom: bottomModularHeight + 'px'}">
        <mt-field label="备注/描述：" placeholder="桌椅摆放要求等（选填）" type="textarea" rows="4" :value="meetingConter.Remarks"></mt-field>
      </div>
      <div class="bottomModular" ref="bottomModular">
        确认预约会议室
      </div>
    </div>
</template>
<style lang="less" scoped>
  .Modular{
    padding: 0.5rem 1.2rem;
    line-height: 1.8;
    background-color: #fff;
    position: relative;
    margin-bottom: 0.5rem;
  }
  .Modular-name-left, .addUser{
    display: flex;
    justify-content: space-between;
  }
  .Modular-name-left{
    font-size: 1rem;
    font-weight: 900;
  }
  .field{
    margin-bottom: 0.5rem;
  }
  .iconAdd{
    display: block;
    width: 2rem;
    height: 2rem;
    font-size: 1.8rem;
    border-radius: 1.5rem;
    background: #6DB1FF;
    flex-direction: row-reverse;
    text-align: center;
    line-height: 1.8rem;
    color: #fff;
  }
  .userInfo{
    color: #4A4A4A;
  }
  .bottomModular{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    width: 100%;
    background: #6DB1FF;
    text-align: center;
    color: #fff;
    padding: 0.8rem 0;
  }
</style>
<script>
  import { Toast } from 'mint-ui'
  import {showTime} from '../../filters/showTime'
  export default{
    data(){
      return {
        meetingData: '',
        meetingTime: '',
        meetingTimeStater: true,
        ModularList: {
          name: '会议室名字',
          equipment: '设备1，设备2, 设备3, 设备4',
          mettingAddare: '多媒体教室(20-25人)',
          stater: true
        },
        meetingConter: {
          meetingName: '',
          meetingCenter: '',
          date: '',
          time: '',
          userInfoName: ['我', '她'],
          Remarks: '',
          phoneNumber: ''
        },
        bottomModularHeight: '',
        meetingTimeLong: ''
      }
    },
    activated () {
      // 根据路由情况判断当前页面数据是否需要初始化
      if (this.$route.query.start === 1) this.Initialization()
      let time = new Date()
      time = time.getTime() / 1000
      this.meetingConter.date = this.meetingData = showTime(time).substring(0, 11)
      if (this.$route.query.time) {
        this.meetingTime = this.meetingConter.time = this.$route.query.time
      } else {
        this.meetingTime = this.meetingConter.time = showTime(time).substring(11, 14) + '00'
      }
      console.log('this,$route', this.$route.query.start, typeof this.$route.query.start)
    },
    deactivated () {
      this.meetingTimeStater = false
    },
    methods: {
      // 数据初始化
      Initialization () {
        this.meetingData = ''
        this.meetingTime = ''
        this.meetingTimeStater = true
        this.ModularList = {
          name: '会议室名字',
          equipment: '设备1，设备2, 设备3, 设备4',
          mettingAddare: '多媒体教室(20-25人)',
          stater: true
        },
        this.meetingConter = {
          meetingName: '',
          meetingCenter: '',
          date: '',
          time: '',
          userInfoName: ['我', '她'],
          Remarks: ''
        },
        this.bottomModularHeight = ''
        this.meetingTimeLong = ''
      },
      open(val) {
        this.$refs[val].open()
        console.log(this.$refs.picker2.$children[0].$el.children[0].children[1].children[2].children[0].children)
        if (val === 'picker2') this.$refs.picker2.$children[0].$el.children[0].children[1].children[2].children[0].children[1].innerHTML = '30'
      },
      // 用户选择日期确认后触发事件
      dataChange(value) {
        let time = value.getTime() / 1000
        let date = showTime(time).substring(0, 11)
        Toast({message: '已选择 ' + date, position: 'bottom'})
        this.meetingConter.date = date
      },
      // 用户选择具体时间时处理分钟字段
      TimeChange(value) {
        let hour = value.substring(0, 2)
        let min = value.substring(3, 5)
        console.log(hour, min)
        if (min === '01') min = '30'
        this.meetingConter.time = hour + ':' + min
        Toast({message: '已选择 ' + this.meetingConter.time, position: 'bottom'})
      },
      // 修改用户选择具体时间时分钟现实内容
      change(){
        console.log(this.$refs.picker2.rims)
        this.$set(this.$refs.picker2.rims.min, 0, 0)
        this.$set(this.$refs.picker2.rims.min, 1, 1)
        this.$refs.picker2.generateSlots()
      }
    },
    mounted () {
      this.bottomModularHeight = this.$refs.bottomModular.clientHeight + 8
    }
  }
</script>
